<template>
	<view class="asset-pg">
		<u--form :model="form" ref="uForm" labelPosition="top" class="form-box" labelWidth="auto">
			<u-form-item label="资产分类" prop="assetType">
				<view class="select-item" @click="showAssetType = true">
					<text class="select-text">
						{{ form.assetTypeName || '请选择资产分类' }}
					</text>
					<u-icon name="arrow-right" size="18" color="#999" />
				</view>
			</u-form-item>

			<u-form-item label="条码编号">
				<u--input v-model="form.barcodeNumber" clearable />
			</u-form-item>

			<u-form-item label="资产名称" prop="title" >
				<u--input v-model="form.title" clearable  />
			</u-form-item>

			<u-form-item label="使用人" prop="useUserName">
				<view class="select-item" @click="showUserSelect = true">
					<text class="select-text">
						{{ form.useUserName || '请选择资产使用人' }}
					</text>
					<u-icon name="arrow-right" size="18" color="#999" />
				</view>
			</u-form-item>

			<u-form-item label="存放地点" prop="storageLocation">
				<u--input v-model="form.storageLocation" clearable />
			</u-form-item>

			<u-form-item label="业务状态" prop="businessStatus">
				<u-radio-group v-model="form.businessStatus">
					<u-radio v-for="(item, index) in businessStatus" :key="index" :name="item.value">
						{{ item.label }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u--form>

		<!-- 弹出选择资产分类 -->
		<u-action-sheet :show="showAssetType" mode="bottom" height="50%" :closeOnClickOverlay="true">
			<scroll-view style="height: 100%;" scroll-y>
				<view v-for="item in assetTypeList" :key="item.value" class="asset-type-item"
					@click="selectAssetType(item)">
					{{ item.label }}
				</view>
			</scroll-view>
		</u-action-sheet>
		<!-- 选择使用人员 -->
		<u-popup :show="showUserSelect" mode="bottom" height="80%" :closeable="true" @close="showUserSelect=false">
			<view class="select-panel" style="margin-top: 40px;padding: 10px;">
				<view class="search-user-box">
					<u--input placeholder="请输入名字" clearable border="surround" v-model="searchUser"></u--input>
					<u-button type="primary" text="搜索" style="width: 100px;margin-left: 10px;background-color: deepskyblue;"></u-button>
				</view>
				<view>
					<scroll-view style="height: 800rpx" scroll-y>
						<view v-for="item in allUserList" :key="item.id" class="asset-type-item"
							@click="handleUseUser(item)">
							{{item.deptName}}-{{ item.nickname }}
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<view class="footer-box">
			<view class="clear-btn" @click="clear">清空</view>
			<view class="save-btn" @click="submit">查询</view>
		</view>
	</view>
</template>

<script>
	import {
		getDictListAllSimple
	} from '@/api/dict/index.js'
	import {
		getBarcodeNumber,
		uploadFile,
		assetCreate
	} from '@/api/asset/index.js'
	import {
		getUserPage
	} from '@/api/system/user.js'
	const formData = {
		barcodeNumber: '',
		title: '',
		assetType: '',
		assetTypeName: '',
		useUser: '',
		useUserName: '',
		storageLocation: '',
		businessStatus: '',
	}
	export default {
		data() {
			return {
				searchUser: '',
				fileList: [],
				form: {...formData},
				businessStatus: [],
				assetTypeList: [],
				showAssetType: false,
				showPrintCode: false,
				showUserSelect: false,
				selectedCompany: '',
				selectedDept: '',
				companyList: [],
				departmentList: [],
				allUserList: [],
				userList: [], // 当前筛选后显示的人员列表
			}
		},
		components: {
		},
		mounted() {
			// if (!plus.bluetooth.isSupport()) {
			//     uni.showModal({
			//         title: '提示',
			//         content: '当前设备不支持蓝牙功能'
			//     });
			//     return;
			// }
			this.getDictList()
			this.getUserList()
		},
		methods: {
			async getUserList() {
				const ret = await getUserPage({
					pageSize: 10000
				})
				this.allUserList = ret.data.list
			},
			async getDictList() {
				const ret = await getDictListAllSimple()
				const dictData = ret.data || []
				// 业务状态
				const businessStatus = dictData.filter(v => v.dictType === 'business_status')
				this.businessStatus = businessStatus
				// 资产分类
				const assetTypeList = dictData.filter(v => v.dictType === 'asset_classification')
				this.assetTypeList = assetTypeList
			},
			selectAssetType(item) {
				this.form.assetType = item.value
				this.form.assetTypeName = item.label
				this.showAssetType = false
			},
			handleAsset(e, a) {
				const {
					label,
					value
				} = e[0]
				this.form.assetType = value
				this.form.assetTypeName = label
			},
			handleUseUser(e) {
				const {
					deptName,
					nickname,
					deptId,
					postIds,
					mobile,
					id
				} = e
				this.form.useUserName = nickname
				this.form.useUser = id
				this.showUserSelect = false
			},
			clear(){
				this.form = {...formData}
			},
			isObjectEqual(obj1, obj2) {
			  const keys1 = Object.keys(obj1);
			    const keys2 = Object.keys(obj2);
			    if (keys1.length !== keys2.length) {
			      return false;
			    }
			    for (let key of keys1) {
			      if (obj1[key] !== obj2[key]) {
			        return false;
			      }
			    }
			    return true;
			},
			submit() {
				this.$emit('search',this.form,!this.isObjectEqual({...formData},this.form))
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uview-ui/index.scss";
	::v-deep .u-input{
		border-width:1px !important;
		border-color:#dadbde !important;
		}
	.asset-pg {
		background-color: #fff;
		padding: 20rpx;

		.form-box {
			margin-bottom: 120rpx;
		}

		.print-box {
			margin-right: 10px;
			color: #fff;
			background-color: #ff842c;
			border-radius: 4px;
			padding: 6rpx 12rpx;
		}

		.footer-box {
			// position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background-color: #fff;
			border-top: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;

			.save-btn {
				width: 80%;
				background-color: #2cabff;
				color: #fff;
				padding: 20rpx;
				text-align: center;
				border-radius: 12rpx;
			}
			.clear-btn {
				width: 80%;
			    margin-right: 10px;
				background-color: #eee;
				color: black;
				padding: 20rpx;
				text-align: center;
				border-radius: 12rpx;
			}
		}

		.asset-type-item {
			padding: 30rpx;
			border-bottom: 1px solid #eee;
			font-size: 30rpx;
		}

		.select-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 20rpx;
			border: 1px solid #e5e5e5;
			border-radius: 8rpx;
			background-color: #fff;
			color: #333;
			width: 100%;
			height: 40px;
		}

		.select-text {
			flex: 1;
			color: #333;
		}

		.search-user-box {
			display: flex;
		}
	}
</style>